<template>
  <div id="headBox" class="pageNormalBackground">
    <headerT title="账号安全" />
    <div class="headMarginTop boxMain" style="height:100vh">
      <div class="zhBg">
        <p class="zhtitle">账号安全</p>
        <div class="everyBlockBgcolor zhMain">
          <div class="everypadding">
            <div class="displayFlex zhMainBox">
              <div class="getPhone">
                <p>手机号</p>
                <input type="text" readonly v-model="zhInfo.phone" />
              </div>
              <!-- <div class="ghPhone" @click="toChangePhone">更改手机号</div> -->
            </div>
            <!-- <div class="displayFlex zhMainBox">
              <div class="getPhone">
                <p>密码</p>
               
                 <input type="password" readonly v-model="zhInfo.pwd" />
              </div>
            </div> -->
            <!-- <div class="btnChangePwd" @click="toChangePwd">更换密码</div> -->
            <div class="btnChangePwd" @click="toChangePhone">更改手机号</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import headerT from "@/components/header";
import {userInfo} from '@/services/personCenter'
export default {
  components: {
    headerT
  },
  name: "",

  data() {
    return {
      zhInfo:{
        phone:'',
        pwd:''
      }
    };
  },
  created() {
    this.getUserInfo()
  },
  watch: {},

  methods: {
    getUserInfo(){//获取用户信息
      this.$post(userInfo).then(res => {
          if(res.code==200 && res.data!=null){
            // this.userInfo=res.data
            this.zhInfo.phone=res.data.phone
          }
      })
    },
    toChangePhone(){//前往更换手机号
        this.$tools.goPage('/changePhone')
    },
    toChangePwd(){//前往更换密码
        this.$tools.goPage('/changePwd')
    }
  }
};
</script>

<style lang="less" rel="stylesheet/less" type="text/css" scoped>
@colorRed: #f64135;
@fontsize32: 0.32rem;
#headBox {
  .everypadding {
    padding: 0 0.83rem 0 0.95rem;
  }
  .boxMain {
    .zhBg {
      height: 3.72rem;
      background-image: url("/static/images/zhanghao.png");
      background-size: 100%;

      position: relative;
      .zhtitle {
        font-size: 0.64rem;
        font-weight: bold;
        color: #ffffff;
        padding: 0.96rem 0.76rem;
      }
    }
    .zhMain {
      width: 100%;
      border-radius: 0.25rem;
      position: absolute;
      height: 16.14rem;
      color: #4e4e4e;
      font-size: 0.34rem;
      .zhMainBox {
        height: 2.41rem;
        justify-content: space-between;
        border-bottom: 1px solid #e2e2e2;
        .getPhone {
          width: calc(~'100% - 2.2rem');
          p:first-child {
            font-size: 0.34rem;
          }
          p:last-child {
            font-size: 0.59rem;
            font-weight: bold;
          }
          input{
            height: 1.2rem;
            width: 100%;
            font-size: 0.59rem;
            font-weight: bold;
            border: none;
          }
        }
        .ghPhone {
          width: 1.87rem;
          height: 0.79rem;
          border: 1px solid @colorRed;
          border-radius: 1.48rem;
          text-align: center;
          line-height: 0.79rem;
          font-size: 0.27rem;
          color: @colorRed;
        }
      }
    }
    .btnChangePwd {
      margin-top: 1.15rem;
      height: 1.13rem;
      background: linear-gradient(
        90deg,
        rgba(246, 65, 53, 1) 0%,
        rgba(255, 205, 88, 1) 100%
      );
      box-shadow: 0rem 0rem 0rem rgba(255, 112, 79, 0.4);
      border-radius: 1rem;
      font-size: 0.39rem;
      color: #ffffff;
      text-align: center;
      line-height: 1.13rem;
      font-weight:bold;
    }
  }
}
</style>
